@keyframes enter-x-animation {
  to{
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes enter-y-animation {
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
// 每个页面最多设置8个
* {
  .enter-x{
    transform:translateX(-50px)
  }
  .-enter-x{
    transform: translateX(50px)
  }
  .enter-x,.-enter-x{
    opacity: 0;
    animation: enter-x-animation 0.4s ease-in-out 0.3s;
    animation-fill-mode: forwards;
    &:nth-child(1){
      animation-delay: .1s;
    }
    &:nth-child(2){
      animation-delay: .2s;
    }
    &:nth-child(3){
      animation-delay: .3s;
    }
    &:nth-child(4){
      animation-delay: .4s;
    }
    &:nth-child(5){
      animation-delay: .5s;
    }
    &:nth-child(6){
      animation-delay: .6s;
    }
    &:nth-child(7){
      animation-delay: .7s;
    }
    &:nth-child(8){
      animation-delay: .8s;
    }
  }
}
.flex{
  display: flex;
}
.flex-align{
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-between{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.w100{
  width: 100%;
}
